@import "app/styles/mixins"
@import "app/styles/bootstrap/variables"

#user-home
  .left-column
    +make-sm-column(4)

  .right-column
    +make-sm-column(8)
  .general-title
    text-align: center
    padding: 5px 0px
    margin: 0px
    background: white
  .profile-wrapper
    text-align: center
    outline: 1px solid darkgrey
    max-width: 100%
    +center-block()

    > .picture
      width: 100%
      background-color: #ffe4bc

    > .profile-info
      background: white

      .extra-info
        padding-bottom: 3px
        &:empty
          display: none

    .name
      margin: 0px auto
      padding: 10px inherit
      color: white
      text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000

  .profile-menu
    padding-left: 0px
    width: 100%
    > a
      border-radius: 0
      border-width: 1px 0px 0px 0px
      border-color: darkgrey
      &:hover
        border-color: #888
      > span
        color: #555555
        font-size: 15px
        margin-left: 5px

  .panel-footer
    text-align: right
    
  .bronze
    border: 4px solid rgb(153, 102, 0)
  .silver
    border: 4px solid rgb(179, 179, 179)
  .gold
    border: 4px solid rgb(255, 204, 0)
  .diamond
    border: 4px solid rgb(102, 204, 255)



  .contributor-categories
    list-style: none
    padding: 0px
    margin-top: 15px

    > .contributor-category
      outline: 1px solid black
      margin-bottom: 15px

      > .contributor-image
        border: none
        width: 100%
        border-bottom: 1px solid black

      > .contributor-title
        text-align: center
        padding: 5px 0px
        margin: 0px
        background: white
  .inventory
    padding: 0px
    margin-top: 15px
    .inventory-title
      text-align: center
      padding: 5px 0px
      margin: 0px
      background: white
    .items-title
      text-align: center
      padding: 5px 0px
      margin: 10px
      background: white
    .hero-container
      text-align: center
      background-color: white
      #hero-pose
        width: calc(100% - 2 * 5px)
        margin: 5px
    .items
      margin-top: 10px
      .float
        padding: 0
        margin: 0
        list-style: none
        display: flex
        justify-content: space-around
        align-items: flex-start
        flex-direction: row
      img
        max-width: 20%
        height: auto
        margin-bottom: 10px
        border: 1.5px solid #000

.vertical-buffer
  padding: 10px 0px
